<template>
    <div class="grid-view" ref="gridView">
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: "GridView",
        props: {
            cols: {
                type: Number,
                default: 2
            },
            hMargin: {
                type: Number,
                default: 8
            },
            vMargin: {
                type: Number,
                default: 8
            },
            itemSpace: {
                type: Number,
                default: 8
            },
            lineSpace: {
                type: Number,
                default: 8
            }
        },
        mounted: function () {
            setTimeout(this._autoLayout, 20)
        },
        updated: function () {
            this._autoLayout()
        },
        methods: {
            _autoLayout: function () {
                // 1.获取gridEl和children
                // 注: 这里为什么不用document.querySelector呢?
                // 答: 因为如果在项目中, 多处都用到了grid-view, 那么这里就不确定获取的是哪一个了.
                let gridEl = this.$refs.gridView;
                let children = gridEl.children;

                // 2.设置gridEl的内边距
                gridEl.style.padding = `${this.vMargin}px ${this.hMargin}px`

                // 3.计算item的宽度
                let itemWidth = (gridEl.clientWidth - 2 * this.hMargin - (this.cols - 1) * this.itemSpace) / this.cols;
                for (let i = 0; i < children.length; i++) {
                    let item = children[i];
                    item.style.width = itemWidth + 'px';
                    if ((i+1) % this.cols !== 0) {
                        item.style.marginRight = this.itemSpace + 'px'
                    }
                    if (i >= this.cols) {
                        item.style.marginTop = this.lineSpace + 'px'
                    }
                }
            }
        }
    }
</script>

<style scoped>
    .grid-view {
        display: flex;
        flex-wrap: wrap;
    }
</style>